<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<text class="title">我是首页</text>
		{{"Mesa"}}
		<view>{{msg}}</view>
		<view>{{msg + 'Msea'}}</view>
		<view>{{"Msea".indexOf("sea") !== -1 ? "最靓的仔" : "NO"}}</view><!-- 微信小程序里面是无法使用indexOf的 -->
		<view>{{"我爱北京天安门".slice(0, 1)}}</view>
		<view>{{false || "" || "给你买条该"}}</view>
		<image class="logo" :src="url" mode=""></image>
		<!-- <view class="box{{1}}"></view> --><!-- 不推荐 -->
		<view :class="'box' + 1"></view>
		<view :style="{width: '100px', height: '100px', background: 'red'}"></view>
		<view :style="[{width: '100px', height: '100px', background: 'green'},]"></view>
		<view :class="{box111: true}"></view>
		<view :class="['box111', 'box222']"></view>
		<view>
			<view v-for="(item, index) in names" :key="index" :class="{box333:index == currentIndex}" @click="setIndexNum(index)">{{item}}</view>
		</view>
		<view :class="[{box111: true}, 'box222']"></view>
		<button type="primary" @click="handleToPath">toNews</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello uniapp',
				msg: 'lili',
				names: ['lili', 'luce', 'haha', 'feifei'],
				currentIndex: 0,
				url: 'https://tse1-mm.cn.bing.net/th/id/R-C.9b1c8824e1c590b85168a685d16d7779?rik=IuMLd8zLKULaig&riu=http%3a%2f%2fscimg.jianbihuadq.com%2ftouxiang%2f202004%2f202004012005563.jpg&ehk=6KHNHMUDgb%2f3XKVuFXGi5Lr7OXCA81g%2bTZIbzrdO3aU%3d&risl=&pid=ImgRaw'
				
			}
		},
		onLoad() {// 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
			uni.$on("testEmit", (rel) => {
				console.log(rel)
			})
		},
		methods: {
			setIndexNum(index){
				this.currentIndex = index
			},
			handleToPath(){
				uni.navigateTo({// 跳转非tabbar页面
				    url: '../one/one?name=Msea'
				});
				// uni.switchTab({// 跳转tabbar页面
				//     url: '../news/news'
				// });
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	
	.box111{
		width:100px;
		height: 100px;
		background: pink;
	}
	.box222{
		border: 1px solid #007AFF;
	}
	.box333{
		background: yellow;
	}
</style>
